// typefaces are imported in application.scss per w3 rules: https://github.com/chriseppstein/compass/issues/639
// exo - http://www.google.com/webfonts#UsePlace:use/Collection:Exo:300,400,600,700,800,300italic,400italic,600italic,700italic,800italic

//---------------------------------
// font-families
$sans-fallback: Arial, Sans-Serif;
$exo: 'Exo', $sans-fallback;
$source-sans: 'Source Sans Pro', $sans-fallback;
$sans: $source-sans;
$serif: serif;
$mono: "lucida console", mono;
$body-font-family: $sans;


//-------------------
// font weights
$light: 200;
$book: 300;
$normal: 400;
$medium: 500;
$demi: 600;
$bold: 700;
$extra-bold: 800;
$ultra-bold: 900;

//--------------------------
// font-styles
$blockquote-font-style: italic;
$em-font-style: italic;
$strong-font-weight: $bold;

//-----------------------------
// font-colors
$light-text-color: $white;
$dark-text-shadow: 0 -1px rgba($blackblue, .3);
$dark-text-color: $bodycopy-dark-text-color;
$light-text-shadow: 0 -1px rgba($white, .3);

@mixin light-text {
  color: $light-text-color;
  text-shadow: $dark-text-shadow;
}//@mixin

@mixin dark-text {
  color: $dark-text-color;
  text-shadow: $light-text-shadow;
}//@mixin

//-------------------------------------------
// line-heights
// defining these as reusable variables can
// be very helpful for some fragile layouts.
$hero-line-height: 60px;
$hero-thick-line-height: $hero-line-height;
$hero-thin-line-height: $hero-line-height;
$h1-line-height: 52px;
$h2-line-height: 34px;
$h3-line-height: 30px;
$h4-line-height: 30px;
$h5-line-height: 24px;
$h6-line-height: 24px;
$bodycopy-line-height: 24px;

@mixin typestyle( $style ) {

 @if $style == hero-thick {
    font-size: 48px;
    line-height: $hero-thick-line-height;
    font-weight: $demi;
    color: $h136-color;
  }//@if

   @if $style == hero-thin {
    font-size: 48px;
    line-height: $hero-thin-line-height;
    font-weight: $light;
    color: $h136-color;
  }//@if

   @if $style == h1 {
    font-size: 36px;
    line-height: $h1-line-height;
    font-weight: $demi;
    color: $h136-color;
  }//@if

  @if $style == h2 {
    font-size: 26px;
    line-height: $h2-line-height;
    font-weight: $medium;
    color: $h245-color;
  }//@if

  @if $style == h3 {
    font-size: 22px;
    line-height: $h3-line-height;
    font-weight: $medium;
    color: $h136-color;
  }//@if

  @if $style == h4 {
    font-size: 22px;
    line-height: $h4-line-height;
    font-weight: $demi;
    color: $h245-color;
  }//@if

  @if $style == h5 {
    font-size: 18px;
    line-height: $h5-line-height;
    font-weight: $demi;
    color: $h245-color;
  }//@if

  @if $style == h6 {
    font-size: 16px;
    line-height: $h6-line-height;
    font-weight: $bold;
    color: $h136-color;
  }//@if

  @if $style == bodycopy {
    font-size: 16px;
    line-height: $bodycopy-line-height;
    font-weight: $normal;
    color: $bodycopy-color;
  }//@if

  @if $style == codecopy {
    font-size: 12px;
    line-height: 1; // reset this for mono
    font-weight: $normal;
  }//@if
}//@mixin
